<template>
  <div class="chart">
    <el-card>
      <ul>
        <li>
          <span>{{chartData.increment_users}}</span>
          <p>今日新增用户</p>
        </li>
        <li>
          <span>{{chartData.total_users}}</span>
          <p>总用户量</p>
        </li>
        <li>
          <span>{{chartData.increment_questions}}</span>
          <p>新增试题</p>
        </li>
        <li>
          <span>{{chartData.total_questions}}</span>
          <p>总试题量</p>
        </li>
        <li>
          <span>{{chartData.total_done_questions}}</span>
          <p>总刷题量</p>
        </li>
        <li>
          <span>{{chartData.personal_questions}}</span>
          <p>人均刷题量</p>
        </li>
      </ul>
    </el-card>

    <el-card>
      <div class="echarts" ref="echart"></div>
    </el-card>
  </div>
</template>

<script>
import { getChartData, getStatistics } from "@/api/chart.js";
// 导入echarts
import echarts from "echarts";
export default {
  data() {
    return {
      chartData: {}
    };
  },

  created() {
    getChartData().then(res => {
      console.log("数据概览", res);
      this.chartData = res.data;
    });
  },

  mounted() {
    var myChart = echarts.init(this.$refs.echart);

    getStatistics().then(res => {
      console.log("企业题目数据统计", res);
      var legendData = res.data.map(item => {
        return item.name;
      });
      var option = {
        title: {
          text: "整体数据",
          textStyle: {
            color: "#696969"
          },
          top: 50,
          left: 100
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: 50,
          data: legendData
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            color: ['#409eff', '#55cd78', '#f76137', '#f9b358'],
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: res.data
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    });
  }
};
</script>

<style lang="less">
.chart {
  ul {
    display: flex;
    align-items: center;
    justify-content: space-around;

    li {
      text-align: center;

      &:nth-of-type(3) span,
      &:nth-of-type(4) span {
        border-color: #f76137;
        color: #f76137;
      }

      &:nth-of-type(5) span,
      &:last-of-type span {
        border-color: #55cd78;
        color: #55cd78;
      }
    }

    span {
      display: inline-block;
      width: 99px;
      height: 99px;
      border: 2px solid #0789fa;
      border-radius: 50%;
      text-align: center;
      line-height: 99px;
      color: #0789fa;
      font-size: 25px;
    }

    p {
      font-size: 17px;
      color: #737373;
      margin-top: 8px;
    }
  }

  .echarts {
    width: 100%;
    height: 570px;
  }
}
</style>